<template>
	<view class="content">
		<u-navbar :fixed="false" title="不合格评审" titleStyle="color:#fff;" rightIcon="reload" @rightClick="RefreshBtn">
			<view class="u-nav-slot" slot="left">
				<view class="NavbarLeft">
					<u-icon name="arrow-left" :duration="0" size="20" color="#fff" @click="GoBack"></u-icon>
				</view>
			</view>
		</u-navbar>
		<view class="SearchBox">

			<u-search class="search" :showAction="true" v-model="searchValue" shape="square" actionText="查询"
				bgColor="#fff" :actionStyle="{color:'#fff'}" :animation="false" @custom="OnSearch" @search="OnSearch">
			</u-search>

		</view>
		<view style="background-color: #51d0d0;">
			<u-tabs :list="TabList" :current="TabsIndex" @change="ChangeTab" lineColor="#fff"
				:activeStyle="{'font-weight': '600','color':'#fff'}"></u-tabs>
		</view>

		<u-list ref="list" @scrolltolower="scrolltolower" class="MainBox" :pagingEnabled="true"
			:preLoadScreen="page.pageIndex*4">
			<u-list-item v-for="(item, index) in ListData" :key="index">
				<view class="ListCard" @click="GoInfo(item)">

					<view class="TopOrdinal">
						<view class="Xuhao">
							{{index + 1}}
						</view>
					</view>

					<m-field label="单据日期" :value="item.BillDate"></m-field>
					<m-field label="单据编号" :value="item.BillNO"></m-field>
					<m-field label="信息来源" :value="item.InformationSource"></m-field>
					<m-field label="工单单号" :value="item.GDDH"></m-field>
					<m-field label="品号" :value="item.ProductCode"></m-field>
					<m-field label="品名" :value="item.ProductName"></m-field>

					<m-field label="规格" :value="item.ProductSpec"></m-field>
					<m-field label="材质" :value="item.FMaterials"></m-field>
					<m-field label="检验数量" :value="item.Qty"></m-field>
					<m-field label="发起人" :value="item.UserName"></m-field>
					<m-field label="责任供应商" :value="item.SupplyName"></m-field>
					<m-field label="抽检次数" :value="item.SamplingFrequency"></m-field>

					<m-field label="抽样数量" :value="item.SamplingQuantity"></m-field>
					<m-field label="抽样合格数量" :value="item.SampleHGNumber"></m-field>
					<m-field label="抽样不合格数" :value="item.SampleBHGNumber"></m-field>
					<m-field label="来源检验单号" :value="item.TrackingNumber"></m-field>

					<m-field label="异常描述" :value="item.Comment"></m-field>
					<m-field label="备注" :value="item.FRemarks"></m-field>


				</view>
			</u-list-item>

			<u-loadmore @loadmore="GetMoreData" :status="LoadStatus"></u-loadmore>

		</u-list>


		<view
			style="border-top: 1px solid #ebebeb;height: 50px;line-height: 50px;background-color: #fff;padding: 0 15px;"
			class="x-f">
			<view class="Total x-f">
				<text>总数：</text>
				<text>{{Total}}</text>
			</view>
		</view>

	</view>
</template>

<script>
	// 不合格评审
	export default {
		data() {
			return {
				searchValue: '', // 搜索框
				TabsIndex: 0,
				TabList: [],
				/*
				TabList: [ // Tabs标签数组
					{
						name: '来料检',
						value: 'LLJYD',
						id: 1
					}, {
						name: '首件检',
						value: 'SJJ',
						id: 2
					}, {
						name: '巡检',
						value: 'XJ',
						id: 3
					},
					// {
					// 	name: '末件检',
					// 	value: 'MJJ',
					// 	id: 4
					// }, 
					{
						name: '成品检',
						value: 'CPJ',
						id: 5
					},
				],
				*/
				formFilterData: { // 筛选Form
					CreateDate: '', // 单据日期
				},
				LoadStatus: 'loadmore',
				ListData: [], // 列表数据
				Total: 0, // 列表总数
				page: {
					pageIndex: 0,
					pageSize: 10,
				},
			};
		},
		created() {
			var that = this;
			this.getTabList();
			setTimeout(() => {
				that.loadmore();
			}, 50)
		},
		mounted() {
			var that = this;
		},
		methods: {
			getTabList() {
				this.Request.request('Get_QMS_FType', {}, (ret) => {
					if (ret.status === 200) {
						let arr = []
						let obj = {}
						ret.data.ds.forEach((item, index) => {
							arr.push({
								name: item.Name,
								value: item.FType,
								id: item.InformationSource,
							})
						})

						ret.data.ds.forEach((item) => {
							obj[item.FType] = item.Name
						})
						console.log(obj)
						let NData = this.$store.state.appConfigInfo.ModuleInfo_All[0]['Node'].filter(
							item => !item
							.IsTabbar);

						arr = arr.filter((item) => {
							let flag = false;
							flag = NData.some((ele) => ele.APFunName == obj[item
								.value])
							return flag;
						})
						this.TabList = arr;
						console.log(this.TabList)
					}
				});
			},
			ChangeTab(index) { // 切换Tab栏
				var that = this;

				// 因为切换Tab无法改变索引，手动记录一下
				that.TabsIndex = index.index;
				that.page.pageIndex = 0;
				that.ListData = [];
				that.LoadStatus = 'loadmore';

				setTimeout(() => {

					that.loadmore();
				}, 100)
			},
			RefreshBtn() { // 刷新
				this.ChangeTab({
					...this.TabList[this.TabsIndex],
					index: this.TabsIndex
				})

			},
			OnSearch() {
				var that = this;
				that.page.pageIndex = 0;
				that.ListData = [];
				that.LoadStatus = 'loadmore';

				that.loadmore();
			},
			scrolltolower() {
				this.loadmore();
			},
			GetMoreData() { // 点击列表的 加载更多 ，触发
				this.loadmore();
			},
			loadmore() {
				let that = this;

				if (that.LoadStatus == 'nomore') return;
				that.LoadStatus = 'loading';

				this.page.pageIndex = ++this.page.pageIndex;
				let obj = {
					pageSize: this.page.pageSize,
					pageIndex: this.page.pageIndex,
					ProductName: this.searchValue,
					JYLX: this.TabList[this.TabsIndex].id,
				};
				console.log(JSON.stringify(obj))
				that.Request.request('APP_BHGPSList', obj, function(ret) {
					// console.log(JSON.stringify(ret))
					if (ret.status == 200) {
						that.Total = ret.data.ds1[0]['Total'];

						that.ListData.push(...ret.data.ds);
						// that.ListData = ret.data.ds;

						that.LoadStatus = 'loadmore';
						if (that.ListData.length == that.Total) {
							that.LoadStatus = 'nomore';
						}

					}
				});
			},
			GoInfo(data) {
				uni.navigateTo({
					url: './ReviewPageInfo?id=' + data.BadReviewID
				})
			},
			GoBack() {
				uni.navigateBack()
			},
		},
	}
</script>

<style lang="scss">
	* {
		padding: 0;
		margin: 0;
		box-sizing: border-box;
	}


	.content {
		/* 给顶部盒子安全高度 */
		// padding-top: var(--status-bar-height);
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: #f1f1f1;

		.u-navbar__content__right {
			.u-icon__icon {
				color: #fff !important;
			}
		}

		// 顶部导航栏 navbar点击左侧会有改变透明的的操作，直接强制赋值为1
		.u-navbar__content__left {
			opacity: 1 !important;
		}

		.SearchBox {
			background-color: #fff;
			background-color: #51d0d0;
			padding: 6px 15px 10px;
			display: flex;
			align-items: center;

			.LeftBox {
				background-color: #fff;
				height: 100%;
				padding: 0 8px;
				border-radius: 4px 0 0 4px;

				text {
					height: 34px;
					line-height: 34px;
					font-size: 14px
				}
			}

			.search {
				flex: 1;
				height: 34px !important;
				line-height: 34px;

				.u-search__content {
					// border-radius: 0 4px 4px 0 !important;
				}
			}
		}


		// Tab页签
		.u-tabs__wrapper__nav {
			color: #fff !important;
			background-color: #51d0d0 !important;

			.u-tabs__wrapper__nav__item__text {
				color: #fff !important;
			}
		}

		.u-tabs__wrapper__nav__item {
			width: fit-content !important;
		}

		.MainBox {
			flex: 1;
			overflow: auto;
			height: 100%;
			padding: 10px;

			.ListCard {
				min-height: 200px;
				background-color: #fff;
				margin-bottom: 10px;
				padding: 10px 15px;
				border-radius: 8px;
				box-shadow: 0px 0px 12px -8px #333;

				/* 序号 */
				.TopOrdinal {
					.Xuhao {
						width: fit-content;
						height: 20px;
						text-align: center;
						line-height: 20px;
						background-color: #51d0d0;
						color: #fff;
						border-radius: 4px;
						min-width: 20px;
					}
				}
			}
		}


		.PopupBox {
			background-color: #fff;
			display: flex;
			flex-direction: column;
			padding-bottom: 20px;

			.PopupMainBox {
				flex: 1;
				overflow: auto;
				min-height: 200px;
				padding-bottom: 20px;
			}

			.PopupBottomBox {
				display: flex;
				align-items: center;
				justify-content: space-evenly;

				.SubBtn {
					width: 40%;
					max-width: 300px;
					// min-width: 200px;
					background-color: #51d0d0;
					color: #fff;
					border-radius: 12px;
				}
			}
		}
	}
</style>